<template>
  <div>
    <!-- 简单插槽示例 -->
    <h1>客户列表</h1>
    <slot></slot>

    <!-- 具名插槽示例 -->
    <h2>操作面板</h2>
    <slot name="actions"></slot>

    <!-- 作用域插槽示例 -->
    <h3>标记客户</h3>
    <ul>
      <li v-for="customer in customers" :key="customer.id">
        <!-- 将customer对象传递给插槽作用域 -->
        <slot name="tag" :customer="customer">
          <!-- 默认标记 -->
          <span>未标记</span>
        </slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customers: [
        { id: 1, name: "客户A", status: "潜在", tag: "标记A" },
        { id: 2, name: "客户B", status: "合作", tag: "标记B" },
        { id: 3, name: "客户C", status: "流失", tag: "标记C" },
      ],
    };
  },
};
</script>
